
<!-- PICK A FONT -->
<fieldset id="fldPickFont"><legend>{#stylelibrary_dlg.font_style_panel}</legend>

	<div class="pair">
		<label>{#stylelibrary_dlg.font_face}</label>
		<div class="controls">
			<select id="ddlFontFamily" name="ddlFontFamily" class="mceEditableSelect" onchange="fontPicked()">
			<option value=""></option>
			</select>

			<!-- Size -->
			<select id="ddlFontSize" class="mceEditableSelect" onchange="fontPicked()" title="{#stylelibrary_dlg.font_size}"></select>

			<!-- bold -->
			<select id="ddlFontWeight" onchange="fontPicked()" title="{#stylelibrary_dlg.font_weight}">
				<option value=""></option>
				<option value="normal">{#stylelibrary_dlg.font_weight_normal}</option>
				<option value="bold">{#stylelibrary_dlg.font_weight_bold}</option>
				<option value="100">100</option>
				<option value="200">200</option>
				<option value="300">300</option>
				<option value="400">400</option>
				<option value="500">500</option>
				<option value="600">600</option>
				<option value="700">700</option>
				<option value="800">800</option>
				<option value="900">900</option>
			</select>

			<!-- italic -->
			<select id="ddlFontStyle" onchange="fontPicked()" title="{#stylelibrary_dlg.font_style}">
				<option value=""></option>
				<option value="normal">{#stylelibrary_dlg.font_style_normal}</option>
				<option value="italic">{#stylelibrary_dlg.font_style_italic}</option>
			</select>
		</div>
	</div>

	<div class="pair" style="display: none">
		<label>{#stylelibrary_dlg.text_decoration}</label>
		<div class="controls">
			<select id="ddlTextDecoration" onchange="fontPicked()">
				<option value=""></option>
				<option value="none">{#stylelibrary_dlg.text_decoration_none}</option>
				<option value="underline">{#stylelibrary_dlg.text_decoration_underline}</option>
				<option value="line-through">{#stylelibrary_dlg.text_decoration_line_through}</option>
			</select>
		</div>
	</div>

	<div class="pair" style="display: none">
		<label>{#stylelibrary_dlg.font_variant}</label>
		<div class="controls">
			<select id="ddlFontVariant" onchange="fontPicked()">
				<option value=""></option>
				<option value="normal">{#stylelibrary_dlg.font_variant_normal}</option>
				<option value="small-caps">{#stylelibrary_dlg.font_variant_small_caps}</option>
			</select>
		</div>
	</div>
	
	<div class="pair">
		<label>{#stylelibrary_dlg.font_color}</label>
		<div class="controls">
			<table>
				<tr>
					<td>
						<input id="fontcolor" name="fontcolor" type="text" value="" size="9" onchange="updateColor('fontcolor_pick','fontcolor'); fontPicked()" />
					</td>
					<td>
						<span id="fontcolor_pickcontainer"><b id="fontcolor_pick">&nbsp;</b></span>
					</td>
					<td>
						<input type="button" value="{#stylelibrary_dlg.clear}" onclick="fntFont.delColors(); fontPicked()" />
					</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="pair">
		<label>{#stylelibrary_dlg.line_height}</label>
		<div class="controls">
			<select id="ddlLineHeight" class="mceEditableSelect" onchange="fontPicked()"></select>
		</div>
	</div>
	<div class="pair">
		<label>{#stylelibrary_dlg.text_indent}</label>
		<div class="controls">
			<select id="ddlIndent" class="mceEditableSelect" onchange="fontPicked()"></select>
		</div>
	</div>

	<div class="pair">
		<label>{#stylelibrary_dlg.text_shadow}</label>
		<div class="controls">
			<table>
				<tr>
					<td>{#stylelibrary_dlg.text_shadow_x}</td>
					<td><input type="number" id="textshadow_x" class="num" title="{#stylelibrary_dlg.text_shadow_x_desc}" onchange="fontPicked()" /></td>
					<td>{#stylelibrary_dlg.text_shadow_y}</td>
					<td><input type="number" id="textshadow_y" class="num" title="{#stylelibrary_dlg.text_shadow_x_desc}" onchange="fontPicked()" /></td>
					<td>{#stylelibrary_dlg.text_shadow_blur}</td>
					<td><input type="number" id="textshadow_blur" class="num" title="{#stylelibrary_dlg.text_shadow_blur_desc}" onchange="fontPicked()" /></td>
					<td>
						<input id="textshadowcolor" name="textshadowcolor" type="text" value="" size="9" onchange="updateColor('textshadowcolor_pick','textshadowcolor'); fontPicked()" />
					</td>
					<td>
						<span id="textshadowcolor_pickcontainer"><b id="textshadowcolor_pick">&nbsp;</b></span>
					</td>
					<td>
						<input type="button" value="{#stylelibrary_dlg.clear}" onclick="fntFont.clearTextShadow(); fontPicked()" />
					</td>
				</tr>
			</table>
		</div>
	</div>

	<!-- div class="pair">
		<label>{#stylelibrary_dlg.link_color}</label>
		<div class="controls">
			<table>
				<tr>
					<td>
						<input id="linkcolor" name="linkcolor" type="text" value="" size="9" onchange="updateColor('linkcolor_pick','linkcolor'); fontPicked()" />
					</td>
					<td>
						<span id="linkcolor_pickcontainer"><b id="linkcolor_pick">&nbsp;</b></span>
					</td>
					<td>
						<input type="button" value="{#stylelibrary_dlg.clear}" onclick="fntFont.delLinkColors(); fontPicked()" />
					</td>
					<td>
						<label for="chkLinkBold">{#stylelibrary_dlg.link_bold}</label>
						<input type="checkbox" id="chkLinkBold" onclick="fontPicked()" />
					</td>
				</tr>
			</table>
		</div>
	</div -->

	<!-- div class="pair">
		<label>{#stylelibrary_dlg.vlink_color}</label>
		<div class="controls">
			<table>
				<tr>
					<td>
						<input id="vlinkcolor" name="vlinkcolor" type="text" value="" size="9" onchange="updateColor('vlinkcolor_pick','vlinkcolor'); fontPicked()" />
					</td>
					<td>
						<span id="vlinkcolor_pickcontainer"><b id="vlinkcolor_pick">&nbsp;</b></span>
					</td>
					<td>
						<input type="button" value="{#stylelibrary_dlg.clear}" onclick="fntFont.delVLinkColors(); fontPicked()" />
					</td>
				</tr>
			</table>
		</div>
	</div -->

<script type="text/javascript">
var fntFont = new simpleFontSelect();
</script>

</fieldset>
